<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>无标题文档</title>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/yuding.css"/>
<style>
	.ticket_tab_xx td .date input {
		width: 160px;
		height: 25px;
		border: #dfdfdf solid 1px;
	}
</style>
<body>

<div id="app">
	<div>
		<iframe scrolling="no" frameborder="0" src="../head/head.html" width="100%" height="27"></iframe>
	</div>
	<div class="top">
		<iframe scrolling="no" src="../top/top.html" frameborder="0" width="100%" height="110"></iframe>
	</div>
	<div class="menu">
		<iframe scrolling="no" src="../daohang/meizu.html" frameborder="0" width="100%" height="50"></iframe>
	</div>
	<div class="container">
		<div class="bgcolor_white">
			<div class="cur_position">您的位置：<a href="">首页</a> &gt;&nbsp;&nbsp;门票预订</div>

			<div class="yd_1200">
				<div class="step">
					<ul>
						<li class="step1">选择景点</li>
						<li class="step2">填写订单</li>
						<li class="step3">预约成功</li>
					</ul>
				</div>
			</div>

			<div class="yd_1200">
				<div class="adlist">
					<ul>
						<li><a href=""><img src="images/201409171010380202785.png"/></a></li>
					</ul>
				</div>
				<div class="dd_left">
					<div class="tichet_yd">
						<span class="ticket_title"><a href="">合计：￥{{money}}</a>郑州方特欢乐世界门票</span>
						<table width="910" border="0" cellspacing="0" cellpadding="0" class="ticket_tab_xx">
							<tr>
								<TH>
									<DIV class="tablist">
										<ul>
											<li class="leixing">门票类型</li>
											<li class="date">游玩日期</li>
											<li class="jiage">门票单价</li>
											<li class="shuliang">门票数量</li>
											<li class="zongjia">总价</li>
											<li class="fangshi">支付方式</li>
										</ul>
									</DIV>
								</TH>
							</tr>
							<tr>
								<td>
									<DIV class="tablist">
										<ul>
											<li class="leixing">{{ScenicTicket.name}}</li>
											<li class="date">
												<!--                                                <input name="" type="text"/>-->
												<el-date-picker
														v-model="date"
														type="date"
														placeholder="游玩日期"
														style="width: 140px;height: 30px;"
												>
												</el-date-picker>
												<em>请选定游玩当天</em></li>
											<li class="jiage">￥{{ScenicTicket.dprice}}</li>
											<li class="shuliang">
												<button class="plus" @click="plus()">-</button>
												<input name="" type="text" class="shuliang1" v-model="quantity"/>
												<button class="add" @click="add()">+</button>
												<em>最多选择20</em></li>
											<li class="zongjia">￥{{money}}</li>
											<li class="fangshi">微信支付</li>
										</ul>
									</DIV>
								</td>
							</tr>
							<tr>
								<td align="right">TIP:只能增加同类型支付方式的门票哦！</td>
							</tr>

						</table>
					</div>

					<div class="tichet_yd">
						<span class="ticket_title">旅客信息</span>
						<div class="lk_list">
							<!--常用旅客-->
							<template>
								<el-checkbox-group style="margin-left: 20px;margin-top: 50px;" v-model="checkedCities"
												   @change="handleCheckedCitiesChange">
									<el-checkbox v-for="user in userList" :label="user">
										{{user.name}}
									</el-checkbox>
								</el-checkbox-group>
							</template>
						</div>
						<div class="lk_dj">
							<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
								<tr>
									<td width="300"><label>姓名：</label><input v-model="fcontact.name" name=""
																			 type="text"/></td>
									<td rowspan="2" width="300">
										<button @click="addfcontact()">添加到常用旅客</button>
									</td>
								</tr>
								<tr>
									<td><label>手机：</label><input v-model="fcontact.mobile" name="" type="text"/></td>
								</tr>
							</table>

						</div>
					</div>
					<div class="tichet_yd">
						<span class="ticket_title">取票人信息</span>
						<div class="lk_list">
							<!--取票-->
							<span v-for="(item,index) in userList1"><input name="name" type="radio" @click="cut1(item)"
																		   value=""/>{{item.name}}</span>
						</div>
						<div class="lk_dj">
							<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
								<tr>
									<td width="300"><label>姓名：</label><input name="" v-model="fcontact1.name"
																			 type="text"/></td>
									<td rowspan="2" width="300">
										<button @click="addfcontact()">添加到常用旅客</button>
										<em>温馨提示：取票人信息可不填，它表示旅客即取票人</em>
									</td>
								</tr>
								<tr>
									<td><label>手机：</label><input name="" type="text" v-model="fcontact1.mobile"/></td>
								</tr>
							</table>

						</div>
					</div>
					<div class="tijiao"><a @click="submit()" target="_blank">提交</a><span class="tips">订单提交成功后，游玩日期当天至景点指定窗口付款取票。</span>
					</div>

					<div class="tichet_yd">
						<span class="ticket_title">购买须知</span>
						<div class="tuipiao">
							<ul>
								<li>退票规则：</li>
								<li>
									<ul>
										<li>每张退票费用为4.4元。</li>
										<li>请在使用前1天16点之前退票。</li>
									</ul>
								</li>
								<li>取票入园方式：</li>
								<li>
									<ul>
										<li>凭本人二代身份证在xxx处领票入园。</li>
									</ul>
								</li>
								<li>使用方式：</li>
								<li>
									<ul>
										<li>景区全年开放，xxx~xxx早上6点开始售票，xxx~xxx早上8点开始售票。</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
					<div class="tichet_yd">
						<span class="ticket_title"> 点点梦想城预订协议 </span>
						<div class="tuipiao">
							<ul>
								<li>退票规则：</li>
								<li>
									<ul>
										<li>每张退票费用为4.4元。</li>
										<li>请在使用前1天16点之前退票。</li>
									</ul>
								</li>
								<li>取票入园方式：</li>
								<li>
									<ul>
										<li>凭本人二代身份证在xxx处领票入园。</li>
									</ul>
								</li>
								<li>使用方式：</li>
								<li>
									<ul>
										<li>景区全年开放，xxx~xxx早上6点开始售票，xxx~xxx早上8点开始售票。</li>
									</ul>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<div class="footer">
				<iframe scrolling="no" src="../footer/foot.html" frameborder="0" width="1200" height="120"
						_height="120"></iframe>
			</div>
		</div>
	</div>
</div>

<script>
	var tid = location.href.split('=')[1];

	var vue=new Vue({
		el: '#app',
		data() {
			return {
				orderId: "",//订单id
				checkUser: {
					'id': ''
				},//用户
				ScenicTicket: "",//门票
				quantity: 1,//数量
				money: 0,//价钱
				date: "",//游玩时间
				userList: [],//订票常用用户集合
				fcontact: {//订票常用旅客
					"id": '',
					"userId": "",
					"name": '',
					"mobile": '',
					"isDefault": ""
				},
				userList1: [],//取票常用用户集合
				fcontact1: {//取票常用旅客
					"name": '',
					"mobile": '',
					"userId": "",
				},
				commons: [],//记录常用的用户
				checkedCities: [],//默认选中的框
			}
		},
		//钩子
		created: function () {
			//判断用户是否登录
			this.getUser();
			//this.getTicket();
		},
		methods: {
			//获取门票
			getTicket() {

				let _this = this
				axios.get('/scenicticket/queryById?id=' + tid)
						.then(function (response) {
							console.log("-------" + JSON.stringify(response.data))
							if (response.data.code == 200) {
								_this.ScenicTicket = response.data.data
						//		alert(JSON.stringify(response.data.data))

								//设置价钱
								_this.money = _this.ScenicTicket.dprice
							}
						}).catch(function (error) {
					console.log(error);
				});
			},
			//获取常用旅客
			getUserList() {
				let _this = this
				axios.get('/contact/queryByUserId?userId=' + this.checkUser.id)
						.then(function (response) {
							if (response.data.code == 200) {
								_this.userList = response.data.data
							//	alert(JSON.stringify(response.data.data));
								_this.userList1 = response.data.data
							}
						}).catch(function (error) {
					console.log(error);
				});
			},
			plus() {
				this.quantity -= 1;
				if (this.quantity < 1) {
					this.quantity = 1;
				}
				this.money = this.quantity * this.ScenicTicket.dprice
			},
			add() {
				this.quantity += 1;
				if (this.quantity > 20) {
					this.quantity = 20;
					alert("最多只能购买20张")
				}
				this.money = this.quantity * this.ScenicTicket.dprice
			},
			//添加常用旅客
			addfcontact() {
				// alert(JSON.stringify(this.fcontact))
				// 调用方法
				this.fcontact.userId = this.checkUser.id
				let _this = this
				axios.post('/contact/addContact', this.fcontact)
						.then(function (response) {
							if (response.data.code == 200) {
								//成功后调用方法刷新旅客
								alert("添加成功")
								_this.getUserList()
							}
						}).catch(function (error) {
					console.log(error);
				});
			},
			//跳转主页
			home() {
				top.location.href = "/html/front/indexshiyan.html"
			},
			//刷新
			refresh() {
				window.reload()
			},
			//判断用户是否登录
			getUser() {
				let _this = this
				axios.get('/tuser/tick')
						.then(function (response) {
							if (response.data.code == 200) {
								//初始化信息
							//	alert("确认账号已登录");
								_this.checkUser = response.data.data
								// alert(_this.checkUser+"asds")
								_this.orderId = location.href.split('=')[1];
								_this.getTicket();
								_this.getUserList()
							} else {
								//alert(response.data.data)
								setTimeout(function () {
									top.location.href = "/html/login.html"
								}, 1000); // 定时时间
							}
						}).catch(function (error) {
					console.log(error);
				});
			},
			//更换常用
			handleCheckedCitiesChange(value) {
				this.commons = value;//勾选的角色存放
			},
			cut1(fcontact) {
				this.fcontact1 = fcontact;
			},
			//提交
			submit() {
				if (this.date == null || this.date == '') {
					alert("请选择游玩日期")
					return;
				}
				let d = new Date();
				// alert(this.date.getTime()+"----"+d.getTime()+"-----")
				if (d.getTime() > this.date.getTime() + 86400000) {
					alert("请像前看")
					return;
				}
				if (this.commons.length == 0 && (this.fcontact.name == null || this.fcontact.name == '' || this.fcontact.mobile == null || this.fcontact.mobile == '')) {
					alert("请选择订票人")
					return;
				}
				//旅客常用信息
				if (this.fcontact.name != null && this.fcontact.name != '' && this.fcontact.mobile != null && this.fcontact.mobile != '') {
					this.commons.push(this.fcontact)
				}
				//订票人
				// this.commons

				//取票信息
				if (!(this.fcontact1.name != null && this.fcontact1.name != '' && this.fcontact1.mobile != null && this.fcontact1.mobile != '')) {
					alert("请选择取票人")
					return
				}
				//取票人
				// this.fcontact

				//封装成对象
				let data = {
					"ScenicTicket": this.ScenicTicket,//门票信息
					"quantity": this.quantity,//门票数量
					"money": this.money,//价钱
					"date": this.date,//游玩时间
					"commons": this.commons,//订票人
					"fcontact1": this.fcontact1//取票人
				}
				console.log(JSON.stringify(data))

				top.location.href = "zhifu.html"
				localStorage.setItem("data", JSON.stringify(data));

			}
		},


	})


</script>

</body>
</html>

